<!DOCTYPE html>

<html>
<head>
  <title>Mad Libs</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="css/app.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  <style type="text/css" media="screen">
    .main{
      padding: 80px 15px;
    }

    h1 {
      color: #2D373F;
    }

    .navbar {
      background: #16a085;
    }

    .navbar-inverse .navbar-brand {
      color: #fff;
    }

    .revealarea {

    }

    .madlib {
      background: #f5f5f5;
      padding: 20px;
      border-radius: 4px;
      border:1px solid #e3e3e3;
    }

    .form-control {
      width: inherit;
      display: inline;
      margin-bottom: 10px;
      padding: 0px 8px;
    }

    /*reset Twitter Bootstrap*/
    @media screen {
      * {
        -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
        box-sizing: content-box !important;
      }
    }

    .container a img {
      width: 135px;
      height: 34px;
    }


  </style>

</head>
  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <a class="navbar-brand pull-left" href="#">Mad Libs</a>
        <a href="#" class="navbar-btn pull-right" onclick="TogetherJS(this); return false;"><img src="/images/start-togetherjs-gray.png"></a>
      </div>
    </div>

    <div class="container">
      <div class="main">
        <div class="row">
            <h1>Let's play Mad Libs with a friend!</h1>
            <div class="madlib madlib-hidden">
              <p>One day my <input type="text" class="form-control" placeholder="adjective"> friend and I decided to go to the <input type="text" class="form-control" placeholder="sports noun"> game in <input type="text" class="form-control" placeholder="city name">.  We really wanted to see the <input type="text" class="form-control" placeholder="noun"> play the <input type="text" class="form-control" placeholder="noun">.  So we <input type="text" class="form-control" placeholder="action verb"> our <input type="text" class="form-control" placeholder="noun"> down to the <input type="text" class="form-control" placeholder="noun"> and bought some <input type="text" class="form-control" placeholder="noun">.  We got into the game and it was a lot of fun.  We ate some <input type="text" class="form-control" placeholder="adjective"> <input type="text" class="form-control" placeholder="noun"> and drank some <input type="text" class="form-control" placeholder="adjective"> <input type="text" class="form-control" placeholder="noun">.  We had a great time!  We plan to go again next year!</p>

              <button type="button" class="btn btn-default btn-block" id="reveal">Reveal MadLib!</button>
              <button type="button" id="hide" style="display: none" class="btn btn-default btn-block">Hide Madlib!</button>


            </div>

        </div>
      </div>
    </div>

    <!-- togetherjs -->
    <script>
      TogetherJSConfig_findRoom = {prefix: "togetherjsmadlibs", max: 5};
      TogetherJSConfig_autoStart = true;
      TogetherJSConfig_suppressJoinConfirmation = true;
      TogetherJSConfig_storagePrefix = "tjs_madlibs";
    </script>
    <script src="/togetherjs.js"></script>

    <!-- JavaScript plugins (requires jQuery) -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>

  </body>
</html>
